<template>
    <el-dialog
            title="会员详情"
            :visible.sync="thisDetailPage"
            :before-close="handleClose"
            style="width:140%;margin-left: -20%;"
    >
        <el-form ref="detailFrom" label-width="135px">
            <el-row>
                <el-col :span="24" style="font-weight: bold"> 基本信息</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户名：">
                        <div>{{ data.userName }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号：">
                        <div>{{ data.phone }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="昵称：">
                        <div>{{ data.nickName }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="真实姓名：">
                        <div>{{ data.realName }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="状态：">
                        <div v-if="data.status == 0">正常</div>
                        <div v-if="data.status == 1">冻结</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="头像：">
                        <el-image style="width: 35px; height: 35px" v-if="data.headImg != ''" :src="data.headImg"></el-image>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否绑定微信：">
                        <div v-if="data.isWxBound == 0">否</div>
                        <div v-if="data.isWxBound == 1">是</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="OpenId：">
                        <div>{{ data.wxOpenId }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="12">
                    <el-form-item label="微信账号：">
                        <div>{{ data.accountWx }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="微信昵称：">
                        <div>{{ data.wxNickName }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="最近登录终端：">
                        <div v-if="data.lastLoginTerminal == 1">PC</div>
                        <div v-if="data.lastLoginTerminal == 2">h5</div>
                        <div v-if="data.lastLoginTerminal == 3">
                            小程序
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最近登录时间：">
                        <div>
                            {{ data.lastLoginTime | timestampToTime }}
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="注册终端：">
                        <div v-if="data.lastLoginTerminal == 1">PC</div>
                        <div v-if="data.lastLoginTerminal == 2">h5</div>
                        <div v-if="data.lastLoginTerminal == 3">
                            小程序
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="注册时间：">
                        <div>{{ data.createTime | timestampToTime }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="邀请码：">
                        <div>{{ data.invitationCode }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="修改时间：" prop="reviseTime">
                        <div>{{ data.reviseTime | timestampToTime }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="24" style="font-weight: bold">用户地址列表</el-col>
            </el-row>
            <el-table :data="tableData" stripe border>
                <el-table-column label="收货人" prop="consignee"></el-table-column>
                <el-table-column label="收货人手机号" prop="consigneePhone"></el-table-column>
                <el-table-column label="是否默认地址" prop="isDefault" width="100">
                    <template slot-scope="scope">
						<el-tag v-if="scope.row.isDefault == 1">默认地址</el-tag>
					</template>
                </el-table-column>
                <el-table-column label="省" prop="provinceName"></el-table-column>
                <el-table-column label="市" prop="cityName"></el-table-column>
                <el-table-column label="区/县" prop="regionName"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" :formatter="forDateCreateTime"></el-table-column>
                <el-table-column label="修改时间" prop="reviseTime" :formatter="forDateReviseTime"></el-table-column>
            </el-table>
        </el-form>
        <div class="dialog-footer" slot="footer">
			<el-button @click="closeDetailChange">关 闭</el-button>
		</div>
    </el-dialog>
</template>
<script>
    import { findUserDetail, findUserAddressListByUserId } from '@api/martUser/user'
    import dayjs from 'dayjs'

    export default {
        name: 'martUser-detail',
        data() {
            return {
                data: {
                    id: "",
                    userName: "",
                    phone: "",
                    nickName: "",
                    realName: "",
                    status: "0",
                    headImg: "",
                    accountWx: "",
                    isWxBound: "",
                    wxNickName: "",
                    wxOpenId: "",
                    invitationCode: "",
                    registerTerminal: "",
                    createTime: "",
                    lastLoginTerminal: "",
                    lastLoginTime: "",
                    reviseTime: ""
                },
                tableData: [],
                thisDetailPage: this.detailPage,
                userId: this.dUserId
            };
        },
        /**双向绑定 start */
        props: ["detailPage", "dUserId"],
        watch: {
            detailPage(val) {
                this.thisDetailPage = val; //②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            thisDetailPage(val) {
                this.$emit("on-detailPage-change", val); //③组件内对myResult变更后向外部发送事件通知
            },
            dUserId(val) {
                this.userId = val; //②监听外部对props属性uShow的变更，并同步到组件内的data属性udpateShow中
                this.fetchData();
            },
            userId(val) {
                this.$emit("on-detail-change", val); //③组件内对udpateShow变更后向外部发送事件通知
            },
        },
        /**双向绑定 end */
        methods: {
            closeDetailChange() {
                this.thisDetailPage = !this.thisDetailPage;
            },
            handleClose(done) {
                this.$confirm("确定关闭吗？")
                    .then(() => {
                        done();
                    })
                    .catch(() => {
                    });
            },
            fetchData() {
                this.loading = true;
                if (this.userId != undefined && this.userId > 0) {
                    this.getUserDetail(this.userId);
                    this.getUserAddressListByUserId(this.userId);
                }
            },
            getUserDetail(userId) {
                this.loading = true;
                findUserDetail({
                    id: userId,
                })
                    .then((res) => {
                        this.data = res.data;
                        this.loading = false;
                    })
                    .catch((err) => {
                        console.log("err", err);
                        this.loading = false;
                    });
            },
            getUserAddressListByUserId(userId) {
                this.loading = true;
                findUserAddressListByUserId({
                    userId: userId,
                })
                    .then((res) => {
                        this.tableData = res.data;
                        this.loading = false;
                    })
                    .catch((err) => {
                        console.log("err", err);
                        this.loading = false;
                    });
            },
            forDateCreateTime (row, column) {
                return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
            },
            forDateReviseTime (row, column) {
                return row.reviseTime == null ? '' : dayjs(row.reviseTime).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        created() {
        },
        mounted() {
        },
        computed: {},
        filters: {
            timestampToTime(timestamp) {
                if (timestamp == undefined || timestamp == 0 || timestamp == "") {
                    return "-";
                }
                var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + "-";
                var M =
                    (date.getMonth() + 1 < 10
                        ? "0" + (date.getMonth() + 1)
                        : date.getMonth() + 1) + "-";
                var D = date.getDate() + " ";
                var h = date.getHours() + ":";
                var m = date.getMinutes() + ":";
                var s = date.getSeconds();
                return Y + M + D + h + m + s;
            }
        }
    };
</script>